<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
<style>
    h1 {
        text-align: center;
    }

    table {
        margin: auto;
        text-align: center;
    }
</style>

<body>
<h1>核酸检测系统</h1>
<form action="/medicalAssay/list" method="post">
    <select name="hospitalId" id="selectHospital">
        <option value="">--请选择机构--</option>
    </select>
<button type="submit">查询</button>
</form>

<table border="1">
    <tr>
        <td><strong>被检测人</strong></td>
        <td><strong>被检测人手机号</strong></td>
        <td><strong>被检测人身份证</strong></td>
        <td><strong>检测机构</strong></td>
        <td><strong>检测日期</strong></td>
        <td><strong>检测结果</strong></td>
        <td><strong>操作</strong></td>
    </tr>
    <tr th:each="info:${list}">
        <td th:text="${info.assayUser}"></td>
        <td th:text="${info.phone}"></td>
        <td th:text="${info.cardNum}"></td>
        <td th:text="${info.hospitalName}"></td>
        <td th:text="${#dates.format(info.assayTime,'yyyy-MM-dd')}"></td>
        <td th:text="${info.assayResult==1?'确诊':'检测中'}"></td>
        <td><a href="#">确诊</a></td>
    </tr>
</table>


<script th:inline="javascript">
    $(function () {
        var hospitalId=[[${hospitalId}]]
        //请求后台拿到数据——机构的数据
        $.ajax({
            url: '/hospital',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                let optionStr="<option value=\"\">--请选择机构--</option>"
                for (let i = 0; i < data.length; i++) {
                    if (hospitalId==data[i].id){
                        optionStr+="<option selected value=\""+data[i].id+"\">"+data[i].name+"</option>"
                    }else {
                        optionStr+="<option value=\""+data[i].id+"\">"+data[i].name+"</option>"
                    }
                }
                $("#selectHospital").html(optionStr);
            }
        })
    })
</script>
</body>
</html>